<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <el-select placeholder="商品类别" v-model="info.gcategory">
                <el-option>所有</el-option>
                <el-option v-for="(g,i) in categoryArr" :label="g.category" :value="g.id"></el-option>
            </el-select>
            <el-input  placeholder="商品名称/商品编码" v-model="info.gname" style="display: inline-block; width: 200px;"></el-input>
            <el-button icon="el-icon-search" circle @click="searchData()"></el-button>
        </div>
        <p></p>
        <div>
            <el-button type="success" @Click="addGoods()">添加商品</el-button>
            <el-button type="danger" @click="deleteGoods()">删除商品</el-button>
        </div>
        <el-table
                ref="FormRef"
                :data="goodsArr"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="gname"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="商品编码">
            </el-table-column>
            <el-table-column
                    prop="category.category"
                    label="商品类别">
            </el-table-column>
            <el-table-column
                    prop="spec.stype"
                    label="商品规格">
            </el-table-column>
            <el-table-column
                    prop="brand.btype"
                    label="商品品牌">
            </el-table-column>
            <el-table-column
                    prop="grade.gtype"
                    label="商品等级">
            </el-table-column>
            <el-table-column
                    prop="deposit.state"
                    label="商品储藏方式">
            </el-table-column>
            <el-table-column
                    prop="minprice"
                    label="最低价格">
            </el-table-column>
            <el-table-column
                    prop="maxprice"
                    label="最高价格">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="success" plain @click="updateGoods(scope.row.id)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :total="pageTotal">
        </el-pagination>
    </div>

    <script>
        $.get("/cai/goods/listCategory",function (backData) {
            app.categoryArr = backData.data;
        })
        var app = new Vue({
            el:"#app",
            data:{
                info:{},
                goodsArr:[],
                categoryArr:[],
                pageTotal:0
            },
            methods:{
                addGoods:function(){
                    window.location.href = "/cai/addGoods.html";
                },
                updateGoods:function(id){
                    window.location.href = "/cai/updateGoods.html?id="+id;
                },
                deleteGoods:function(){
                    if(confirm("删除不可修改，您确定删除吗？")){
                        let currentSelect = app.$refs.FormRef.selection;
                        for (let i = 0;i<currentSelect.length;i++){
                            $.get("/cai/goods/delGoods?id="+currentSelect[i].id,function (backData) {
                                if(backData.code == 1){
                                    app.$notify({
                                        title: '成功提示',
                                        message: backData.msg,
                                        type: 'success'
                                    });
                                    getInfo(1,10);
                                }else {
                                    app.$notify.error({
                                        title: '错误提示',
                                        message: backData.msg
                                    });
                                }
                            });
                        }
                    }
                },
                handleCurrentChange:function (val) {
                    getInfo(val,10);
                },
                searchData:function () {
                    getInfo(1,10);
                }
            }
        });
        function getInfo(a,b) {
            app.info.pageNo = a;
            app.info.pageCount = b;
            $.post("/cai/goods/list",app.info,function(backData){
                app.goodsArr = backData.data.currentData;
                app.pageTotal = backData.data.currentDataTotal;
            });
        }
        getInfo(1,10);
    </script>
</body>
</html>